<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tipso demo</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="animate.css">
    <link rel="stylesheet" href="./src/tipso.css">
    <style>
        html,body{
            margin:0;
        }
        body{
            margin-top: 100px;
            margin-left: 200px;
        }
        .box{
            width: 800px;
        }
        .flex{
            display: flex;
        }
        .t-b{
            justify-content: center;
        }
        .t-b>div,
        .l-r>div{
            width: 150px;
            text-align: center;
            border: 1px solid #ddd;
            box-sizing: border-box;
            margin:2px;
            cursor: pointer;
        }
        .flex-space-center{
            justify-content: space-between;
        }
        .tipso_bubble > .tipso_arrow{
            border-width: 6px;
        }
    </style>
	<script src="./jquery.1.8.3.js"></script>
	<script type="module" src="./src/tipso.js"></script>
</head>
<body>
    <div class="box">
        <div class="flex t-b">
            <div class="btn" data-msg="几个字提示">top-left</div>
            <div class="btn">top</div>
            <div class="btn" data-msg="几个字提示<br />换个行">top-right</div>
        </div>
        <div class="flex flex-space-center">
            <div class="l-r">
                <div class="btn" data-msg="啊啊啊啊" data-width="150">left-top</div>
                <div class="btn">left</div>
                <div class="btn" data-title="标题">left-bottom</div>
            </div>
            <div class="l-r">
                <div class="btn">right-top</div>
                <div class="btn">right</div>
                <div class="btn">right-bottom</div>
            </div>
        </div>
        <div class="flex t-b">
            <div class="btn">bottom-left</div>
            <div class="btn">bottom</div>
            <div class="btn">bottom-right</div>
        </div>
    </div>
    <script>
        $(function(){
            var settings = {
                arrowWidth:6,
                background:'#000',
                color:'#fff',
            }
            $('.box .btn').each(function(){
                var btn = $(this),tipType = btn.html();
                var msg = btn.data('msg'),width = btn.data('width'),title= btn.data('title');
                var opts = {
                    content: msg || ['tips:' + tipType, 'tips2:' + tipType].join('<br />'),
                    position: tipType
                }
                if(width){
                    opts.width = parseInt(width,10);
                    console.log(opts)
                    btn.html(btn.html() + '\n设置了width')
                }
                if(title){
                    opts.useTitle = true;
                    opts.titleContent = title;
                    btn.html(btn.html()+'\n有标题')
                }
                btn.tipso($.extend({}, settings,opts));
            })
        })
    </script>
</body>
</html>